<template>
  <div class="pop-selec-box">
    <t-row :gutter="24">
      <t-col :span="6">
        <div class="hw-box-style-flex hw-box-style-flex-r-center">
          <span>材质类型</span>
          <div class="item-select">
            <t-select v-model="typeId" style="width: 100%">
              <t-option v-for="item in props.tabType.select3" :key="item.id" :label="item.text" :value="item.id" />
            </t-select>
          </div>
        </div>
      </t-col>

      <t-col :span="6">
        <div class="hw-box-style-flex hw-box-style-flex-r-center">
          <span>所属年代</span>
          <div class="item-select">
            <t-cascader
              style="width: 100%"
              v-model="ageId"
              :options="props.tabType.select4"
              :keys="{
                value: 'id',
                children: 'children',
                label: 'text',
              }"
              clearable
              check-strictly
            />
          </div>
        </div>
      </t-col>

      <t-col :span="6" style="margin-top: 16px; margin-bottom: 0">
        <div class="hw-box-style-flex hw-box-style-flex-r-center">
          <span>展品级别</span>
          <div class="item-select">
            <t-select v-model="levelId" style="width: 100%">
              <t-option v-for="item in props.tabType.select1" :key="item.id" :label="item.text" :value="item.id" />
            </t-select>
          </div>
        </div>
      </t-col>

      <t-col :span="6" style="margin-top: 16px; margin-bottom: 0">
        <div class="hw-box-end-box">
          <t-button variant="outline" @click="close"> 取消 </t-button>
          <t-button @click="onSubmit">确定</t-button>
        </div>
      </t-col>
    </t-row>
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { ref } from 'vue';

const props = defineProps({
  tabType: {
    type: Object,
  },
  visible: {
    type: Boolean,
  },
});
const emit = defineEmits(['close', 'Confirm']);
const typeId = ref(0);
const ageId = ref(0);
const levelId = ref(0);
const onReset = () => {
  typeId.value = 0;
  ageId.value = 0;
  levelId.value = 0;
};
const close = () => {
  emit('close');
};
const onSubmit = () => {
  console.log(typeId.value, ageId.value, levelId.value);
  emit('Confirm', typeId.value, ageId.value, levelId.value);
  //   parmas.typeId = typeId.value;
  //   parmas.ageId = ageId.value;
  //   parmas.levelId = levelId.value;
  //   visible.value = false;
};
const onClickConfirm = () => {};
</script>

<style lang="less" scoped>
@import '../../../../Exhibits/index.less';
.pop-selec-box {
  padding: 16px;
  min-width: 584px;
}
.title-heard {
  font-size: 14px;
  line-height: 32px;
}
.hw-box-style-flex {
  span {
    width: 80px;
  }
  .item-select {
    flex: 1;
  }
}
.t-col {
  margin-bottom: 16px;
  margin-top: 0 !important;
}
.t-row {
  margin-top: 0;
}
:deep(.t-select__wrap) {
  margin-bottom: 8px;
}
</style>
